<!-- 支付设置新增、修改 -->
<template>
  <div>
    <el-dialog :title="paymentData.title" :visible.sync="showModal" @close="paymentData.showModal = false" width="600px" top="5vh">
      <el-form label-width="110px" :model="data" ref="update" :rules="rules" v-loading="showLoading" element-loading-text="数据加载中">
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="名称" prop="name">
              <el-input placeholder="输入名称" v-model="data.name" size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="与USDT比例" prop="rate">
              <el-row>
                <el-col :span="14">
                  <el-input placeholder="输入与USDT比例" type="number" v-model="data.rate" size="medium"></el-input>
                </el-col>
                <el-col :span="2" class="tac">
                  ：
                </el-col>
                <el-col :span="8">
                  <el-input placeholder="" v-model="rate" disabled size="medium"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :offset="3" :span="18">
            <el-form-item label="二维码上传" prop="qrcodeUrl">
              <el-upload class="upload-demo" action="http://121.40.240.199/bee/member/fileUpload" name="uploadFile" :show-file-list="false" :headers="tokenimg" :on-success="onSuccess" :before-upload="beforeUpload" :limit="1">
                <el-button size="small" type="primary">点击上传</el-button>
                <div>
                  <img v-if="data.qrcodeUrl " :src="data.qrcodeUrl " class="imgbox">
                </div>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb。建议上传分辨率为1041*572的图片！</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="物理地址" prop="url">
              <el-input placeholder="输入物理地址" v-model="data.url" size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="状态" prop="status">
              <el-select placeholder="选择状态" v-model="data.status" size="medium">
                <el-option v-for="item in paymentStatus" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 底部按钮开始 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="save">提交</el-button>
        <el-button size="medium" @click="paymentData.showModal = false">取消</el-button>
      </span>
      <!-- 底部按钮结束 -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    paymentData: {
      type: Object,
      default: ''
    },
    statusList: {
      type: Array
    }
  },
  data () {
    let usdtPass = (rule, value, callback) => {
      if (value === '' || value === null) {
        callback(new Error('请输入usdt比例'));
      } else {
        callback();
      }
    };
    let httpUrl = (rule, value, callback) => {
      if (value === '' || value === null) {
        callback(new Error('请输入物理地址'));
      } else {
        callback()
      }
    }
    return {
      uploadFile: "", // 图片的文件名称
      tokenimg: { token: sessionStorage.getItem("token") }, // 图片请求头
      showModal: false,
      showLoading: false,
      rate: 1,
      data: {
        name: '',//名称
        rateName: null, //比例名称
        rate: null,//比例
        url: null,//物理地址
        status: null, //状态
        qrcodeUrl: null,// 二维码地址
        id: '',//id
      },
      paymentStatus: [],
      rules: {
        qrcodeUrl: [
          { required: true, message: "请上传图片", trigger: "blur" }
        ],
        url: [
          { required: true, validator: httpUrl, trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择状态", trigger: "change" }
        ],
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" }
        ],
        rate: [
          { required: true, validator: usdtPass, trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    // 图片上传成功后，后台返回图片的路径
    onSuccess (res) {
      if (res.code == 200) {
        this.data.qrcodeUrl = res.data;
      }
    },
    // 图片校验
    beforeUpload (file) {
      var testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type);
      const isLt5KB = file.size / 1024 / 500 < 1;
      if (!testmsg) {
        this.$message.error("上传图片格式不对!");
      }
      if (!isLt5KB) {
        this.$message.error("上传头像图片大小不能超过 500KB!");
      }
      return testmsg && isLt5KB;
    },
    save () {

      this.$refs["update"].validate(async valid => {
        if (valid) {
          this.showLoading = true;
          this.rateName = this.data.rate + ':' + this.rate
          let url = this.paymentData.type == "create" ? "/paymentType/save" : "/paymentType/update";
          let httpMethod = this.paymentData.type == "create" ? "POST" : "PUT";
          let result = await this.request.httpRequest(httpMethod, url, this.data);
          if (result.code == 200) {
            this.paymentData.showModal = false;
            this.$message({ type: "success", message: result.msg });
            this.$emit("close");
          } else {
            this.$message({ type: "error", message: result.msg });
          }
          this.showLoading = false;
        }
      });
    },
    //获取详情
    async getDetail () {
      if (this.paymentData.id) {
        let url = `/paymentType/get/${this.paymentData.id}`
        let result = await this.request.httpRequest('GET', url)
        if (result.code == 200) {
          Object.keys(result.data).forEach((item) => {
            Object.keys(this.data).forEach((i) => {
              if (i === item) {
                this.data[i] = result.data[item]
              }
            })
          })
        } else {
          this.$message({ type: 'error', message: result.msg })
        }
      }
    },
  },
  mounted () {
    this.showModal = this.paymentData.showModal
    this.getDetail()
    this.paymentStatus = this.statusList.filter((item) => item.code)
  }
}
</script>
<style scoped>
</style>